import React from "react";
import { ScrollView, StyleSheet, Text, View } from "react-native";

export default class App extends React.Component<Props> {
  render() {
    return (
      <ScrollView style={styles.container}>
        <View style={styles.react1}>
          <Text>Top border transparent</Text>
        </View>
        <View style={styles.react5}>
          <Text>Top border transparent - no round corners</Text>
        </View>
        <View style={styles.react2}>
          <Text>all borders green</Text>
        </View>
        <View style={styles.react3}>
          <Text>Green, Red, Blue, Purple colors</Text>
        </View>
        <View style={styles.react4}>
          <Text>Green, Red, Blue, Purple colors - no round corners</Text>
        </View>
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  react1: {
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'red',
    borderTopColor: 'transparent',
    borderBottomLeftRadius: 15,
    borderBottomRightRadius: 15,
    paddingVertical: 10,
    margin: 10,
    marginBottom: 20,
  },
  react5: {
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'red',
    borderTopColor: 'transparent',
    paddingVertical: 10,
    margin: 10,
    marginBottom: 20,
  },
  react2: {
    alignItems: 'center',
    borderWidth: 1,
    borderColor: 'green',
    borderRadius: 20,
    paddingVertical: 10,
    margin: 10,
    marginBottom: 20,
  },
  react3: {
    alignItems: 'center',
    borderWidth: 1,
    borderTopColor: 'green',
    borderLeftColor: 'red',
    borderBottomColor: 'blue',
    borderRightColor: 'purple',
    borderBottomLeftRadius: 15,
    borderBottomRightRadius: 15,
    borderTopLeftRadius: 30,
    borderTopRightRadius: 30,
    paddingVertical: 10,
    margin: 10,
    marginBottom: 20,
  },
  react4: {
    alignItems: 'center',
    borderWidth: 1,
    borderTopColor: 'green',
    borderLeftColor: 'red',
    borderBottomColor: 'blue',
    borderRightColor: 'purple',
    paddingVertical: 10,
    margin: 10,
    marginBottom: 20,
  },
});